<template>
	<view style="padding-top: 10upx;padding-left: 20upx;padding-right: 20upx;background-color: white;">
		<!-- 搜索 -->
		<view class= "search-cont">
			<view class="search">
				<image src="../../static/icon/sousuo.svg" mode="widthFix" class="search-img"></image>
				<!-- 搜索框禁用只是提示用户这里可以点击，当点击之后跳转到用户搜索的界面 -->
				<input @confirm="inputSearch" v-model="searchValue" confirm-type='search'  type="text" placeholder="麻辣烫"  focus="true"/>
			</view>
			<text style="color: orange;" @click="inputSearch"> 搜索</text>
		</view>
		
		<view v-if="hasData" class="hot">  
			<view class="hot-search-title" >
				<text>热门搜索</text>
			</view>
			<view class="hot-search-contains">
				<block v-for="(item, index) in hotSearchData" :key="index">
					<view class="hot-search-item">{{item.title}}</view>
				</block>
			</view>
		</view>
		
		<view v-if="true" class="history">
			<view class="history-search-title" >
				<text>搜索历史</text>
				<image src="../../static/images/delete.svg" mode="widthFix" class="search-img" @click="deleteSearch"></image>
			</view>
			<view class="history-search-contains">
				<block v-for="(item, index) in searchkey" :key="index">
					<view class="history-search-item" @click="clickHistory(item)">{{item}}</view>
				</block>
			</view>
		</view>
		
		<!-- 商家数据进行展示 -->
		<!-- <Promptinfo v-if="hasData" :dataInfo="dataInfo"></Promptinfo> -->
		<view style="height: 100%;">
			<Showsearchinfo v-if="true" :sellerInfoList="sellerInfoList"></Showsearchinfo>
		</view>
	</view>
</template>

<script>
	// 加入辅助的组件
	import Showsearchinfo from './showsearchinfo/showsearchinfo.vue';
	
	import Sellerinfo from '../index/sellerinfo.vue'; // 商家信息组件
	import Promptinfo from '../common/promptinfo.vue'; // 提示信息
	
	import {getRequest, getPost} from '../..//api/api.js'; // 请求接口
	import {searchSellerByProduct} from '../../api/request.js'; // 请求路径
	import {lodingdata} from '../../api/errdata.js'; // 请求路径
	
	
	export default {
		components: {
			Showsearchinfo,
			Promptinfo
		},
		data() {
			return {
				sellerInfoList: [],
				searchValue: '', // 搜索值
				hasData: false,
				sellerInfos: [
					
				],
				dataInfo: '没有商家数据',
				searchkey: [
					'烧烤'
				],
				queryParam: {
					pageNum: 0,
					pageSize: 8
				}
			}
		},
		mounted() {
			// console.log("被挂载了");
			// let arr = ["烧","烤"];
			// uni.setStorageSync("searchkey", arr);
			
			// 获取本地缓存的数据
			// let searchkey = uni.getStorageSync('searchkey')
			// this.searchkey = searchkey;
			// console.log(searchkey)
			this.setSearchHistory();
		},
		
		methods: {
			// 点击了历史
			clickHistory(item) {
				this.searchValue = item;
				this.searchSeller(true);
				this.inputSearch();
			},
			
			
			// 
			searchSeller() {
				this.queryParam.pageNum = 0;
				this.getSearchSeller(true);
			},
			
			// 获取搜索数据
			getSearchSeller(bool) {
				
				lodingdata.loding("请求中");
				// 跳转到订单页，返回
				setTimeout(() => {
					uni.hideToast();
					//关闭提示后跳转
					console.log(this.searchValue)
					getRequest(searchSellerByProduct+`?productName=${this.searchValue}&page=${this.queryParam.pageNum}&size=${this.queryParam.pageSize}`)
						.then((res)=> {
							console.log(res.data.data.list);
							this.queryParam.pageNum++;
							if(bool) {
								this.sellerInfoList= [];
							}
							this.sellerInfoList.push(...res.data.data.list);
							
							// clearTimeout(timeout);
						})
						.catch((err)=> {
							// clearTimeout(timeout);
						})
					
					
				}, 1000)
				
			},
			deleteSearch() { // 删除搜索历史
				console.log("删除搜索历史");
				uni.removeStorageSync("searchkey");
				this.setSearchHistory();
			},
			
			inputSearch() { // 搜索
				console.log("点击了搜索");
				if(this.searchValue == '' || typeof this.searchValue  == undefined) {
					// 空值不进行处理
					
				} else {
					let searchData = this.searchValue;
					let searchkeyArr = uni.getStorageSync('searchkey') || [];
					searchkeyArr.unshift(searchData);
					uni.setStorageSync("searchkey", searchkeyArr);
				}
				this.setSearchHistory();
				
				this.searchSeller();
			},
			
			setSearchHistory() {
				let searchkeyArr = uni.getStorageSync('searchkey') || [];
				// 数组进行去重
				let setData = Array.from(new Set(searchkeyArr));
				this.searchkey = setData;
			}
			
		},
		
	}
</script>

<style scoped>
	/* 搜索 */
	.search-img {
		margin: auto 0 auto 20upx;
		width: 40upx;
		height: 40upx;
	}
	.search {
		height: 70upx;
		line-height: 70upx;
		width: 90%;
		display: flex;
		flex-direction: flex;
		background: #eff3f4;
		border-radius: 30rpx; 
		
		align-items: center;
		font-size:25upx;
		display: flex;
		justify-content: space-between;
	}
	.search input {
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		font-size:25upx;
		color: #666666;
		padding-left: 20upx;
		/* border-radius: 20upx; */
	}
	/* 将搜索框和搜索进行一字排开 */
	.search-cont {
		align-items: center;
		font-size:25upx;
		display: flex;
		justify-content: space-between;
	}

	/* 热门搜索 */
	.hot {
		margin: 20upx;
		height: 200upx;
		overflow: hidden; /* 超过的隐藏 */
	}
	
	/* 热门搜索的标题部分 */
	.hot-search-title {
		font-size: 30upx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60upx;
		line-height: 60upx;
	}
	
	/* 热门搜索的装有每个搜索项目的布局容器 */
	.hot-search-contains {
		display: flex;  /* 弹性盒子 */
		flex-direction: row; /* 默认值。灵活的项目将水平显示，正如一个行一样。 */
		justify-content: flex-start;  /* 从行首起始位置开始排列 */
		flex-wrap: wrap; /* 规定灵活的项目在必要的时候拆行或拆列。 */
	}
	/* 每个搜索项目的样式 */
	.hot-search-item {
		background-color: #F7F8Fa;
		border-radius: 6upx;
		font-size: 30upx;
		color: #292c33;
		text-align: center;
		padding: 10upx;
		margin: 20upx 20upx 0 0;
	}
	
	
	/* 搜索历史 */
	.history {
		margin: 20upx;
		margin-bottom: 20upx;
	}
	
	/* 搜索历史的标题部分 */
	.history-search-title {
		font-size: 30upx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60upx;
		line-height: 60upx;
	}
	
	/* 搜索历史的装有每个搜索项目的布局容器 */
	.history-search-contains {
		display: flex;  /* 弹性盒子 */
		flex-direction: row; /* 默认值。灵活的项目将水平显示，正如一个行一样。 */
		justify-content: flex-start;  /* 从行首起始位置开始排列 */
		flex-wrap: wrap; /* 规定灵活的项目在必要的时候拆行或拆列。 */
		margin-bottom: 20upx;
	}
	/* 搜索历史项目的样式 */
	.history-search-item {
		background-color: #F7F8Fa;
		border-radius: 6upx;
		font-size: 30upx;
		color: #292c33;
		text-align: center;
		padding: 10upx;
		margin: 20upx 20upx 0 0;
	}
	
</style>
